<template>
	<view :style="Theme">
		<uni-nav-bar leftIcon="arrowleft" :statusBar="true" :fixed="true" title="公开课" />
		<view class="">
			<!-- banner -->
			<image class="banner" mode="widthFix" :src="info.courseImgUrl"></image>
			<view class="main">
				<view class="boxWrap">
					<view class="header flex">
						<image class="header_img" src="/static/images/img10.png"></image>
						<text class="title">{{info.courseTitle}}</text>
					</view>
					<image class="course-img" src="/static/images/ai-robot.jpg" mode="widthFix"></image>
					<view class="info-row">
						<!-- <view class="tag">人工智能</view> -->
						<text class="date">开课时间：{{info.courseTime}}</text>
					</view>
					<view class="info-row">
						<text class="iconfont icon-user"></text>
						<text class="info-text">讲师：{{info.teacher}}</text>
					</view>
					<view class="info-row">
						<uni-icons type="location" color="grey" size="16"></uni-icons>
						<text class="info-text">{{info.address}}</text>
					</view>
					<view class="price">￥{{info.price}}</view>
					<view class="section-title">课程大纲</view>
					<view class="desc" v-html="info.courseContent"></view>
					<view class="section-title">相关文档</view>
					<view class="xiaza">
						<view class="xiazali" v-for="(item,index) in info.pdfTemplateFileList" :key="index">
							<view class="xiaza_z">{{item.fileName}}</view>
							<view class="xiaza_y" @click="downloadFdf(item.fileUrl)">预览文件</view>
						</view>
					</view>
					<view class="dibukong"></view>
					<view class="dibu">
						<button class="pay-btn" @click="toggle('center')">
							<text class="iconfont icon-cart"></text>
							报名并支付
						</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 个人信息收集--弹窗 -->
		<collect-info ref="childRef"></collect-info>
	</view>
</template>

<script>
	import CollectInfo from '@/components/collectInfo/index.vue'
	export default {
		components: {
			CollectInfo
		},
		data() {
			return {
				isShow: false,
				isUserUpdateFlag: false, //判断当前用户是否更新信息
				id: '',
				info: {}, //课程详情
			}
		},
		onLoad(option) {
			console.log('前一个页面的课程id')
			console.log(option)
			this.id = option.id
			this.getOfflineDtailFun()
		},
		onShow() {
			this.isUserUpdateFlag = uni.getStorageSync('isUserUpdateFlag')
			console.log('是否收集用户信息')
			console.log(this.isUserUpdateFla)
		},
		methods: {
			toggle(type) {
				console.log('点击父级---')
				// 先判断是否收集个人信息----如果没有弹出公共组件--收集信息组件;如果已经收集信息,就直接跳支付
				// this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/tab/my/my'
						})
					}, 1000)
					return
				} else if (!uni.getStorageSync('isUserUpdateFlag')) {
					this.$refs.childRef.showTan('center')
					return
				} else {
					console.log('走微信支付流程')
					this.sjuRequest("/wx/order/submitOrder", 'POST', {
						type: 1,
						courseId: this.id
					}).then(res => {
						console.log('提交订单')
						console.log(res)
						if (res.errno === 0) {
							uni.showToast({
								title: '订单创建成功',
								icon: 'success'
							})
							uni.requestPayment({
								provider: "wxpay",
								nonceStr: res.data.nonceStr,
								package: res.data.packageValue,
								timeStamp: res.data.timeStamp,
								signType: res.data.signType,
								paySign: res.data.paySign,
								success(res) {
									console.log('调起支付')
									console.log(res)
									if (res.errMsg === 'requestPayment:ok') {
										uni.showToast({
											icon: 'none',
											title: '支付成功'
										})
										that.getCourseInfoFun() //获取课程详细
										that.isShow = false
									}
								},
								fail(err) {
									console.log('支付失败', err)
									if (err.errMsg === 'requestPayment:fail cancel') {
										uni.showToast({
											icon: 'none',
											title: '支付失败'
										})
									}
								}
							})
						}else{
							uni.showToast({
								title:res.errmsg,
								icon:'none'
							})
						}
					})
				}

			},
			// 获取线下课程详情
			getOfflineDtailFun() {
				this.sjuRequest("/wx/offlineCourse/getOfflineCourseById", 'POST', {
					id: this.id
				}).then(res => {
					console.log('获取线下课程详情')
					console.log(res)
					if (res.data.courseContent) {
						res.data.courseContent = res.data.courseContent.replace(/img/gi,
							'img style="width: 100%;height:auto;"')
					}
					this.newsDetail = res.data
					this.info = res.data

				})
			},
			// 下载pdf
			downloadFdf(fileUrl) {
				console.log('下载的pdf地址')
				console.log(fileUrl)
				uni.showLoading({
					title: '正在加载中..'
				})
				uni.downloadFile({
					url: fileUrl,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
								uni.hideLoading()
							},
						});
					},
					complete: function(r) {
						uni.hideLoading()
					}
				});
			},


		}

	}
</script>

<style scoped>
	.container {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.banner {
		width: 750rpx;
		height: auto;
		display: block;
	}

	.card {
		width: 100%;
		background: #fff;
		border-radius: 18rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		padding: 32rpx 24rpx;
		box-sizing: border-box;
	}

	.header {
		display: flex;
		align-items: center;
	}

	.iconfont {
		color: #666;
		font-size: 36rpx;
		margin-right: 8rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #31b0e5;
	}

	.course-img {
		width: 100%;
		height: auto;
		border-radius: 12rpx;
		object-fit: cover;
		margin-bottom: 16rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.tag {
		background: #31b0e5;
		color: #fff;
		border-radius: 8rpx;
		padding: 4rpx 16rpx;
		font-size: 22rpx;
		margin-right: 12rpx;
	}

	.date {
		color: #666;
		font-size: 22rpx;
	}

	.info-text {
		color: #333;
		font-size: 22rpx;
		margin-left: 4rpx;
	}

	.price {
		color: #31b0e5;
		font-size: 32rpx;
		font-weight: bold;
		margin: 16rpx 0 8rpx 0;
	}

	.section-title {
		color: #31b0e5;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 4rpx;
	}

	.desc {
		color: #444;
		font-size: 26rpx;
		margin-bottom: 24rpx;
	}

	.pay-btn {
		background: #31b0e5;
		color: #fff;
		font-size: 28rpx;
		border-radius: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pay-btn .iconfont {
		font-size: 32rpx;
		margin-right: 8rpx;
		color: #fff;
	}

	.boxWrap {
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		padding-top: 10rpx;
	}

	.header_img {
		width: 50rpx;
		height: 50rpx;
		margin-right: 10rpx;
	}

	.tancon {
		width: 600rpx;
		height: 57vh;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.form-item {
		margin-bottom: 24rpx;
		position: relative;
	}

	.dingwo {
		position: absolute;
		right: 24rpx;
		top: 66rpx;
	}

	.label {
		font-size: 28rpx;
		color: #333;
		margin: 15rpx 0;
		display: block;
	}

	.required::before {
		content: '*';
		color: #f56c6c;
		margin-right: 4rpx;
	}

	.input {
		width: 93%;
		height: 80rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background: #f7f8fa;
	}

	.inputc {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
	}

	.btn-group {
		display: flex;
		justify-content: space-between;
		margin-top: 32rpx;
	}

	.btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wechat {
		background: #31b0e5;
	}

	.alipay {
		background: #2d5af1;
	}

	.iconfont {
		font-size: 36rpx;
		margin-right: 12rpx;
	}

	.dibukong {
		width: 100%;
		height: 150rpx;
	}

	.dibu {
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.xiaza {
		width: 100%;
		padding: 20rpx 0;
	}

	.xiazali {
		width: 100%;
		display: flex;
		margin-bottom: 10rpx;
		font-size: 26rpx;
		justify-content: space-between;
	}

	.xiaza_y {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #31b0e5;
		border-radius: 10rpx;
		color: #fff;
		text-align: center;
	}

	.xiaza_z {
		width: 75%;
	}
</style>